<script type="text/x-template" id="poster-draw-contour">
    <el-row>
        <el-col :span="12">
            <el-card class="form-card">
                <el-form :model="posterData" label-width="100px" ref="posterDataForm">
                    <el-form-item label="是否本地上传" prop="withPosition">
                        <el-radio-group
                                v-model="posterData.localImg"
                        >
                            <el-radio v-for="(item, key) in TRUE_FALSE_DICT" :key="key" :label="item.value">{{
                                item.label
                                }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <template v-if="posterData.localImg === 1">
                        <el-form-item label="上传海报">
                            <el-upload class="upload-demo"
                                       accept="image/jpeg,image/jpg,image/png"
                                       ref="upload"
                                       :before-upload="beforeUpload"
                                       :limit="1"
                                       drag
                                       list-type="picture-card"
                                       :on-change="onchange"
                                       :auto-upload="false">
                            </el-upload>

                        </el-form-item>
                    </template>
                    <template v-if="posterData.localImg === 0">
                        <el-form-item label="图片url">
                            <el-input
                                    placeholder="请输入图片url地址"
                                    v-model="posterData.posterUrl"
                                    clearable
                            >
                            </el-input>
                        </el-form-item>
                    </template>
                    <el-form-item>
                        <el-button style="margin-left: 10px;" :disabled="disabledSubmit == 1" size="small"
                                   type="success" @click="submitUpload">确定
                        </el-button>
                        <el-button style="margin-left: 10px;" size="small" type="warning" @click="empty">清空</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card class="json-card">
                <div slot="header" class="clearfix">
                    <span class="my-label-info">返回检测图片</span>
                </div>
                <div v-if="posterShow">
                    <div class="face_info">人脸信息: {{face_positions}}</div>
                    <img referrerpolicy="no-referrer" :src="poster_url"/>
                </div>
            </el-card>
        </el-col>
    </el-row>
</script>

<script>
    Vue.component('poster-draw-contour', {
        template: '#poster-draw-contour',
        data: function () {
            return {
                disabledSubmit: 0,
                posterShow: false,
                face_positions: '',
                poster_url: '',
                posterData: {
                    'localImg': 1,
                    'posterUrl': ''
                },
                TRUE_FALSE_DICT: [
                    {
                        label: '是',
                        value: 1
                    },
                    {
                        label: '否',
                        value: 0
                    }
                ],
                urls: {
                    drawContour: '/v1/aiPoster/drawContour.html',
                },
            };
        },
        methods: {
            onchange(f, list) {
                // console.log("this.$refs.upload", this.$refs.upload.uploadFiles)
            },
            empty() {

                if (this.posterData.localImg === 1) {
                    this.$refs.upload.clearFiles()
                } else if (this.posterData.localImg === 0) {
                    this.posterData.posterUrl = ''
                }
            },
            checkPass() {
                if (this.posterData.localImg === 1 && this.$refs.upload.uploadFiles.length == 0) {
                    this.$message({
                        message: '请上传图片'
                    })
                    return false
                } else if (this.posterData.localImg === 0 && this.posterData.posterUrl === '') {
                    this.$message({
                        message: '填写url地址'
                    })
                    return false
                } else {
                    return true
                }
            },
            submitUpload() {
                const checkPass = this.checkPass()
                if (checkPass) {
                    this.disabledSubmit = 1
                    this.formData = new FormData()
                    if (this.posterData.localImg === 1) {
                        this.$refs.upload.uploadFiles.forEach((_) => {
                            this.formData.append('file', _.raw, _.name)

                        })
                    } else {
                        this.formData.append('posterUrl', this.posterData.posterUrl)
                    }
                    this.ajaxUpload(this.urls.drawContour, this.formData, function (result) {
                            if (result.code == 0) {
                                this.$message({
                                    type: 'success',
                                    message: "操作成功！"
                                })
                                if (result.data) {
                                    this.face_positions = result.data.face_positions
                                    this.poster_url = result.data.img_base64_str
                                    this.posterShow = true
                                } else {
                                    this.$message({
                                        message: '未检测到人脸信息'
                                    })
                                }
                                this.disabledSubmit = 0
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: result.msg
                                })
                                this.disabledSubmit = 0
                            }
                        }.bind(this)
                    );
                }
            },
            beforeUpload(file) {

            },
            cancel() {

            },
            submit() {

            }
        },
        watch: {},
        mounted() {

        },
        created() {
        }
    })
</script>

<style>
    .json {
        text-align: left;
    }

    .form-card {
        text-align: left;
        vertical-align: middle;
        width: 100%;
    }

    .json-card {
        text-align: left;
        vertical-align: middle;
        height: auto;
        width: 100%;
    }

    .face_info {
        font-size: 16px;
        font-family: Tahoma;
        margin-bottom: 20px;
    }
</style>